<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单位转换器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="converter-header">
            <h1>单位转换器</h1>
            <p>支持长度、温度、重量、体积和货币转换</p>
        </header>

        <main class="converter-main">
            <!-- 转换类型选择 -->
            <div class="conversion-type">
                <label for="conversion-category">选择转换类型：</label>
                <select id="conversion-category">
                    <option value="length">长度转换</option>
                    <option value="temperature">温度转换</option>
                    <option value="weight">重量转换</option>
                    <option value="volume">体积转换</option>
                    <option value="currency">货币转换</option>
                </select>
            </div>

            <!-- 转换表单 -->
            <div class="converter-form">
                <div class="input-group">
                    <label for="input-value">输入值：</label>
                    <input type="number" id="input-value" placeholder="请输入数值" value="1">
                </div>

                <div class="unit-selectors">
                    <div class="input-group">
                        <label for="from-unit">从：</label>
                        <select id="from-unit"></select>
                    </div>

                    <button id="swap-units" class="swap-btn">
                        ⇄
                    </button>

                    <div class="input-group">
                        <label for="to-unit">到：</label>
                        <select id="to-unit"></select>
                    </div>
                </div>

                <!-- 结果显示 -->
                <div class="result-container">
                    <label>转换结果：</label>
                    <div id="conversion-result" class="result-box">
                        <span id="result-value">0</span>
                        <span id="result-unit">单位</span>
                    </div>
                </div>

                <!-- 转换公式显示 -->
                <div class="formula-container">
                    <label>转换公式：</label>
                    <div id="conversion-formula" class="formula-box">
                        1 [单位] = 转换系数 [目标单位]
                    </div>
                </div>
            </div>

            <!-- 最近转换历史 -->
            <div class="recent-history">
                <h3>最近转换</h3>
                <div id="history-list" class="history-list">
                    <p class="no-history">暂无转换记录</p>
                </div>
            </div>
        </main>

        <!-- 货币汇率更新时间 -->
        <div id="currency-info" class="currency-info">
            <p>⚠️ 货币汇率仅供参考，数据更新时间：<span id="rate-update-time">未更新</span></p>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>